Prev Next |
Field of "Image" type contains image data. The easiest way to display it is by using Image XSL Control:
<sc:image field="My Image"/>
The same thing can be done with XslHelper.image function (sc:image):
<xsl:value-of select="sc:image('My Image',.)" disable-output-escaping="yes"/>
If you want to link an image, you can also do it in two ways:
- with XSL controls:
-
-
<sc:link field="My Link"><sc:image field="My Image"/></sc:link>
-
- Or with functions of XslHelper class:
-
-
<xsl:value-of select="sc:link('My link',.,sc:image('My image',.))" disable-output-escaping="yes"/>
-
If you want to make your own custom image you can use XslHelper.fld function (sc:fld) with subproperties:
source: <xsl:value-of select="sc:fld('image',.,'src')"/>
alt: <xsl:value-of select="sc:fld('image',.,'alt')"/>
width: <xsl:value-of select="sc:fld('image',.,'width')"/>
height: <xsl:value-of select="sc:fld('image',.,'height')"/>
hspace: <xsl:value-of select="sc:fld('image',.,'hspace')"/>
vspace: <xsl:value-of select="sc:fld('image',.,'vspace')"/>
For instance, you may use the following construct:
<img src="{sc:fld('My Image',.,'src')}" alt="{sc:fld('My Image',.,'alt')}" />
You can also extract Sitecore internal image properties if needed:
mediaid: <xsl:value-of select="sc:fld('image',.,'mediaid‘)"/>.
mediapath: <xsl:value-of select="sc:fld('image',.,'mediapath')"/>
showineditor: <xsl:value-of select="sc:fld('image',.,'showineditor')"/>
usethumbnail: <xsl:value-of select="sc:fld('image',.,'usethumbnail')"/>
Prev Next